<template>
  <div class="docker-page">
    <h4 class="zl-title">镜像库列表<Button type="primary" @click="dockerAddModify()" class="fr"><Icon type="md-add" /> 添加镜像库</Button></h4>
    <div class="zl-page-loading" v-if="isLoading">
      <Spin fix></Spin>
    </div>
    <Table v-else :columns="columns" :data="dockerList" class="docker-table"></Table>

    <!-- 新增、修改 -->
    <add-modify-model :visible.sync="dockerVisible" :form="dockerForm" @finish="init" ></add-modify-model>
    <!-- 详情 -->
    <detail-model :visible.sync="detailVisible" :form="dockerForm"></detail-model>
  </div>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
import AddModifyModel from '@/components/docker/add-modify-model'
import DetailModel from '@/components/docker/detail-model'
export default {
  components: { AddModifyModel, DetailModel },
  data() {
    return {
      columns: [{
        type: 'index',
        width: 60
      }, {
        title: '状态',
        render: (h, params) => {
          return h('i', {
            class: params.row.status !== 'active' ? 'zl-badge badge-error' : 'zl-badge'
          })
        }
      }, {
        title: '镜像库地址',
        key: 'url'
      }, {
        title: '用户名',
        key: 'username'
      }, {
        title: '创建时间',
        key: 'createTime'
      }, {
        title: '操作',
        render: (h, params) => {
          if (params.row.status === 'active') {
            return h('div', [
              h('div', {
                class: 'button-inner',
                on: {
                  click: () => {
                    this.dockerStartStop(params.row, false)
                  }
                }
              }, [
                h('Icon', {
                  props: {
                    type: 'md-square'
                  }
                }, ''),
                '停用'
              ])
            ])
          } else {
            return h('div', [
              h('div', {
                class: 'button-inner',
                on: {
                  click: () => {
                    this.dockerStartStop(params.row, true)
                  }
                }
              }, [
                h('Icon', {
                  props: {
                    type: 'md-play'
                  }
                }, ''),
                '启用'
              ]),
              h('div', {
                class: 'button-inner',
                on: {
                  click: () => {
                    this.dockerDelete(params.row)
                  }
                }
              }, [
                h('Icon', {
                  props: {
                    type: 'md-trash'
                  }
                }, ''),
                '删除'
              ])
            ])
          }
        }
      }],
      dockerList: [],
      dockerForm: {},
      dockerVisible: false,
      detailVisible: false,
      isLoading: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 删除镜像库
    dockerDelete(docker) {
      this.$Modal.confirm({
        title: '系统提示',
        content: '确定删除镜像库（' + docker.url + '）?',
        width: 600,
        loading: true,
        onOk: () => {
          Fetch.delete({
            url: '/api/environments/' + this.$route.params.environmentId + '/dockerhubs/' + docker.id
          }).then((res) => {
            if (res && res.code === '0') {
              this.$Message.success({
                content: '删除镜像库（' + docker.url + '）成功！',
                duration: this.DURATION
              })
              this.init()
            } else {
              this.$Message.warning({
                content: res.message || '服务器内部错误',
                duration: this.DURATION
              })
            }
            this.$Modal.remove()
          }).catch((err) => {
            this.$Modal.remove()
            this.$Message.error(err.message)
          })
        }
      })
    },
    // 镜像库启动、删除。 第二个参数为true，为start操作
    dockerStartStop(docker, isStart) {
      let params = Object.assign({}, docker)
      params.status = isStart ? 'active' : 'inactive'
      this.$Modal.confirm({
        title: '系统提示',
        content: '确定' + (isStart ? '启用' : '停用') + docker.url + '镜像库?',
        loading: true,
        width: 600,
        onOk: () => {
          Fetch.put({
            url: '/api/environments/' + this.$route.params.environmentId + '/dockerhubs/' + docker.id,
            params
          }).then((res) => {
            if (res && res.code === '0') {
              this.$Message.success({
                content: (isStart ? '启用' : '停用') + docker.url + '镜像库成功！',
                duration: this.DURATION
              })
              this.init()
            } else {
              this.$Message.warning({
                content: res.message || '服务器内部错误',
                duration: this.DURATION
              })
            }
            this.$Modal.remove()
          }).catch((err) => {
            this.$Modal.remove()
            this.$Message.error(err.message)
          })
        }
      })
    },
    // 镜像库新增、修改
    dockerAddModify(docker) {
      if (docker) {
        this.dockerForm = Object.assign({environmentName: docker.environmentId}, docker)
      } else {
        this.dockerForm = {
          environmentName: '',
          id: ''
        }
      }
      this.dockerVisible = true
    },
    // 获取镜像库初始数据
    init() {
      Fetch.get({
        url: '/api/environments/' + this.$route.params.environmentId + '/dockerhubs'
      }).then((res) => {
        if (res && res.code === '0') {
          this.dockerList = res.data.dockerHubs
        } else {
          this.$Message.warning({
            content: res.message || '服务器内部错误',
            duration: this.DURATION
          })
        }
        this.isLoading = false
      }).catch((err) => {
        this.isLoading = false
        this.$Message.error(err.message)
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.docker-page {
  padding: 20px;
  .docker-table {
    margin-top: 20px;
  }
  .zl-title {
    margin-top: 10px;
  }
}
</style>
